<template>
    <view class="wanlshop-classify-container">
        <view class="wanlshop-classify-container__list">
            <scroll-view
                scroll-y
                scroll-with-animation
                class="left"
                :scroll-top="scrollTop"
                :style="{ height: `${sys.mainHeight}px` }"
            >
                <view
                    v-for="(item, index) in categoryData"
                    :key="item.id"
                    class="item"
                    :class="[currentTab == index ? 'active' : '']"
                    :data-current="index"
                    @tap.stop="handleNav"
                >
                    <text>{{ item.floor.name }}</text>
                </view>
                <view class="edgeInsetBottom"></view>
            </scroll-view>
            <block v-for="(item, index) in categoryData" :key="item.id">
                <scroll-view
                    scroll-y
                    class="right"
                    :style="{ height: `${sys.mainHeight}px` }"
                    v-if="currentTab == index"
                    @scrolltolower="handleLower"
                >
                    <wanl-product3 v-if="currentTab == 0" :dataList="goodsData" :dataStyle="liststyle" />
                    <view class="list-cat" v-else>
                        <view class="padding-top-sm">
                            <view class="list-item radius-bock">
                                <view class="list-container">
                                    <view
                                        class="list-box"
                                        v-for="(childlist, childkey) in item.shop"
                                        :key="childlist.id"
                                        @tap="handleProduct(childlist.id, childlist.brand.name)"
                                    >
                                        <image
                                            lazy-load
                                            :src="$wanlshop.oss(childlist.brand.image, 60, 60)"
                                            class="list-image"
                                        />
                                        <view class="text-sm">{{ childlist.brand.name }}</view>
                                    </view>
                                </view>
                            </view>
                            <view class="edgeInsetBottom"></view>
                        </view>
                    </view>
                    <uni-load-more :status="status" :content-text="contentText" />
                </scroll-view>
            </block>
        </view>
    </view>
</template>
<script>
import wanlProduct3 from "./components/wanl-product3.vue";
export default {
    name: "pageClassify",
    mixins: [],
    props: {},
    components: {
        wanlProduct3,
    },
    data() {
        return {
            scrollTop: 0, //tab标题的滚动条位置
            pagesNum: 0,
            sys: {
                headTop: 0,
                headHeight: 0,
                mainHeight: 0,
                tabbarBottom: 0,
                tabbarHeight: 0,
            },
            categoryData: [],
            currentTab: 0,
            liststyle: "col-1-10",
            goodsData: [], //商品列表数据
            params: {
                search: "",
                sort: "weigh",
                order: "asc",
                page: 1,
                filter: {},
                op: {},
            },
            reload: false, //判断是否上拉
            total: 1, //总条数
            status: "loading",
            contentText: {
                contentdown: "",
                contentrefresh: "正在加载..",
                contentnomore: "没有更多数据了",
            },
            last_page: 1, //最后一页
        };
    },
    computed: {},
    watch: {},
    mounted() {},
    onReady() {
        let sys = uni.getSystemInfoSync(),
            headHeight = sys.statusBarHeight + uni.upx2px(88), //1.1.2升级
            tabbarHeight = sys.safeAreaInsets.bottom + uni.upx2px(100);
        this.sys = {
            headTop: sys.statusBarHeight, //1.1.2升级
            headHeight: headHeight,
            mainHeight: sys.windowHeight - headHeight,
            tabbarBottom: sys.safeAreaInsets.bottom,
            tabbarHeight: tabbarHeight,
        };
    },
    // 下拉刷新
    onPullDownRefresh() {
        console.log(435);
        this.params.page = 1;
        this.reload = true;
        this.goodsData = [];
        this.loadData();
    },
    // 触底加载
    onReachBottom() {
        console.log(123);
        // if (this.goodsData.length >= this.total) {
        //     this.status = "noMore";
        // } else {
        //     this.reload = false;
        //     this.contentText.contentdown = "上拉显示更多";
        //     this.params.page = this.params.page + 1; //页码+1
        //     this.status = "loading";
        this.loadData();
        // }
    },
    onLoad(options) {
        this.currentTab = options.status;
        this.onAdvert();
        this.loadData();
    },
    methods: {
        handleLower() {
            this.loadData("lower");
        },
        //异步加载商品列表
        async loadData(type) {
            this.status = "loading";
            // 判断上拉还是下拉
            if (type === "lower") {
                if (this.goodsData.length >= this.total) {
                    this.status = "noMore";
                    return false;
                } else {
                    this.current_page += 1;
                }
            }
            this.params.type = "goods";
            this.params.filter = { platform_recommend: 1 };
            await uni.request({
                url: "/wanlshop/product/lists",
                methods: "POST",
                data: this.params,
                success: (res) => {
                    uni.stopPullDownRefresh();
                    this.status = "more";
                    this.goodsData = this.reload ? res.data.data : this.goodsData.concat(res.data.data); //数据 追加
                    if (res.data.data.length == 0) {
                        this.empty = `没找到与“${this.category}${this.params.search}"相关的宝贝`;
                    }
                    this.params.page = res.data.current_page; //当前页码
                    this.last_page = res.data.last_page; //最后一页
                    this.total = res.data.total; //总条数
                },
            });
        },
        //获取分类层级
        async onAdvert(adverts) {
            await uni.request({
                url: "/increased.Floor/GetFloorList",
                data: {},
                success: (res) => {
                    this.categoryData = res.res.data;
                },
            });
        },
        // 跳转广告
        handleProduct(category_id, category_name) {
            this.$wanlshop.to(`/pages/shop/index?id=${category_id}`);
        },
        // 点击标题切换当前页时改变样式
        handleNav(e) {
            let cur = e.currentTarget.dataset.current;
            if (this.currentTab == cur) {
                return false;
            } else {
                this.currentTab = cur;
                this.checkCor();
            }
        },
        //判断当前滚动超过一屏时，设置tab标题滚动条。
        checkCor() {
            if (this.currentTab > 7) {
                this.scrollTop = 500;
            } else {
                this.scrollTop = 0;
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.wanlshop-classify-container {
    &__list {
        display: flex;

        .left {
            width: 200rpx;
            z-index: 10;
            background: #fbfbfb;

            .item {
                width: 200rpx;
                height: 110rpx;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 26rpx;
                color: #444;
                font-weight: 400;

                &.active {
                    position: relative;
                    color: #000;
                    font-size: 30rpx;
                    font-weight: 600;
                    background: white;

                    &::before {
                        content: "";
                        position: absolute;
                        border-left: 6rpx solid #fe6600;
                        height: 32rpx;
                        left: 0;
                    }
                }
            }
        }

        .right {
            width: 100%;
            padding-left: 25rpx;
            box-sizing: border-box;

            .list-cat {
                overflow: hidden;
                padding-top: 10rpx;
                padding-right: 20rpx;
                box-sizing: border-box;
            }

            .screen-swiper {
                min-height: 180rpx;
                height: 180rpx;
                overflow: hidden;
            }

            .list-item {
                background: #ffffff;
                width: 100%;
                box-sizing: border-box;
                padding: 20rpx;
                margin-bottom: 20rpx;

                .title {
                    color: #ff4f00;
                }
            }

            .list-container {
                // padding-top: 20rpx;
                display: flex;
                display: -webkit-flex;
                justify-content: flex-start;
                flex-direction: row;
                flex-wrap: wrap;
            }

            .list-box {
                width: 33.3333%;
                text-align: center;
                padding-top: 40rpx;
            }

            .list-image {
                width: 120rpx;
                height: 120rpx;
            }
        }
    }
}
</style>
